<template>
    <div class="paydiv1"
    v-show="checked==1 && (LeftChecked!=99 || RightChecked!=99)">
        <div class="paydiv2">
            <span class="div2span1">使用：</span>
            <img :src="CheckedBankIcon" class="bankicon">
            <span class="div2span1" style="margin-left:5px">{{CheckedBankName}}</span>
            <span class="div2span2">{{CardName}}</span>
            <span class="div2span2" style="margin-left:177px;background-color: rgb(44, 148, 52);">网银</span>
            <span class="div2span3" @click="GotoChooseBank" :style="BtnGoStyle"
            @mouseover="moBtnGo" @mouseleave="mlBtnGo">返回改选其他</span>
        </div>
        <div class="paydiv3">
            <img src="../../assets/icon/radio.png" class="RadioImg">
            <span class="RadioText">在线支付</span>
        </div>
        <div class="paydiv4">
            <span>支付：</span>
            <span style="font-size: 16px;">￥</span>
            <span class="div4span1">{{PayTotalPrice}}</span>
            <span>（已优惠：￥0）</span>
        </div>
    </div>
</template>

<script>
    export default {
        name:'XiaoPayChooseBank',
        data(){
            return{
                CardName:'',
                checked:1,
                LeftChecked:99,
                RightChecked:99,
                BtnGoStyle:'',
                CheckedBankIcon:'',
                CheckedBankName:'',
                PayTotalPrice:'',
            }
        },
        mounted(){
            this.$bus.$on('TwoWayChecked',(TwoWayChecked)=>{
                this.checked=TwoWayChecked
            })
            this.$bus.$on('BankChecked',(leftindex,rightinden,BankIcon,BankName)=>{
                this.LeftChecked=leftindex
                this.RightChecked=rightinden
                this.CheckedBankIcon=BankIcon
                this.CheckedBankName=BankName
                if( leftindex != 99){
                    this.CardName='储蓄卡'
                }else{
                    this.CardName='信用卡'
                }
            })
            this.$bus.$on('PayTotalPrice',(PayTotalPrice)=>{
                this.PayTotalPrice=PayTotalPrice
            })
        },
        beforeDestroy(){
            this.$bus.$off('TwoWayChecked')
            this.$bus.$off('BankChecked')
            this.$bus.$off('PayTotalPrice')
        },
        methods:{
            GotoChooseBank(){
                this.LeftChecked=this.RightChecked=99,
                this.$bus.$emit('BankChecked',this.LeftChecked,this.RightChecked)

            },
            moBtnGo(){
                this.BtnGoStyle='color: rgb(52, 181, 255);'
            },
            mlBtnGo(){
                this.BtnGoStyle='color: rgb(52, 140, 255);'
            },
        },
    }
</script>

<style scoped>
.paydiv1{
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.paydiv2{
    margin-top: -15px;
}
.div2span1{
    margin-top: 5px;
    position: absolute;
    color: rgb(59, 59, 59);
}
.bankicon{
    margin-left: 50px;
    width: 30px;
    height: 30px;
}
.div2span2{
    margin-top: 6px;
    font-size: 12px;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 2px;
    color: white;
    margin-left: 115px;
    position: absolute;
    background-color: rgb(77, 167, 252);
}
.div2span3{
    font-size: 14px;
    margin-top: 8px;
    position: absolute;
    margin-left: 280px;
    color: rgb(52, 140, 255);
    cursor: pointer;
}
.paydiv3{
    margin-top: 20px;
    background-color: rgb(248, 248, 248);
    border: 1px solid rgb(230, 230, 230);
    height: 50px;
}
.RadioImg{
    margin-top: 14px;
    margin-left: 45px;
    height: 22px;
    width: 22px;
    cursor: pointer;
}
.RadioText{
    margin-left: 4px;
    margin-top: 15px;
    position: absolute;
    font-size: 14px;
    color: rgb(58, 58, 58);
}
.paydiv4{
    margin-top: 15px;
    font-size: 13px;
    color: rgb(66, 66, 66);
}
.div4span1{
    margin-right: 5px;
    font-size: 19px;
    color: rgb(219, 32, 94);
}
</style>